<template>
  <div class="details-footer">
   	<div class="collect">
   		<i class="iconfont icon-shouhouguanli"></i>
   		<span>收藏</span>
   	</div>
   	<div class="cart-btn">
   		添加商品：
   		<span class="min" @click="minClick(id)">-</span>
   		{{ cartNum(id) }}
   		<span class="add" @click="addClick(good)">+</span>
   	</div>
   	<router-link tag="div" to="/cart" class="cart-logo">
   		<i class="iconfont icon-gouwuche"></i>
   		<div class="cartNum" v-if=" cartNumber > 0||cartNumber==='99+' ? true : false">{{ cartNumber }}</div>
   	</router-link>
  </div>
</template>

<script>
	import { mapActions,mapGetters } from "vuex"
    export default {
    	name:"detailsFooter",
        data () {
		    return {
		      flag:false
		    }
		},
		mounted(){
		    
		},
		computed:{
		    ...mapGetters({
		    	cartNum:"cart/cartGoodNum",
		    	cartNumber : 'cart/cartTotalNum_view'
		    })
		},
		props:{
			id:{
				type:[String,Number],
				default:""
			},
			good:{
				type:Object,
				default:function(){
					return{}
				}
			}
		},
		methods: {
			...mapActions(['cart/minusProductToCart','cart/addProductToCart']),
			minClick(goodid){
				this['cart/minusProductToCart'](goodid)
			},
			addClick(data){
				this['cart/addProductToCart'](data);
			}
		}
	}
</script>

<style lang="less" scoped>
	.details-footer{
		width: 100%;
		height: 1.2rem;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		border-top: 1px solid #999;
		line-height: 1.2rem;
		text-align: center;
		div{
			float: left;
		}
		.collect{
			width: 1.2rem;
			padding: 0 0.1rem;
			i{
				font-size: 0.4rem;
				display: block;
				height: 0.6rem;
				line-height: 0.6rem;
			}
			span{
				font-size: 0.3rem;
				display: block;
				height: 0.6rem;
				line-height: 0.6rem;
			}
		}
		.cart-btn{
			span{
				width: 0.6rem;
				height: 0.6rem;
				line-height: 0.6rem;
				text-align: center;
				display: inline-block;
				border: 1px solid #ffbe89;
				border-radius: 50%;
				font-size: 0.6rem;
				margin:0.3rem 0.2rem;
				color: red;
			}
		}
		.cart-logo{
			width: 1.2rem;
			height: 1.2rem;
			position: absolute;
			bottom: 0.5rem;
			right: 0.2rem;
			border-top: 1px solid #999;
			padding: 0.1rem;
			border-radius: 50%;
			background: #fff;
			i{
				width: 1rem;
				height: 1rem;
				line-height: 1rem;
				display: block;
				border-radius: 50%;
				background: #ffd600;
				font-size: 0.6rem;
				color: #fff;
			}
			.cartNum{
			  position: absolute;
			  top: 2%;
			  right: 0;
			  transform: translateX(-10%);
			  width: 0.44rem;
			  height:0.44rem;
			  text-align:center;
			  line-height: 0.44rem;
			  background: red;
			  border-radius:50%;
			  color: #fff;
			}
		}
	}
</style>